<template>
  <div class="answer-wrapper">
    <slot name="top-part"></slot>
    <div class="bottom-line">
      <div class="option" :class="{active: answer.is_thumb_up==='1'}"
           onselectstart="return false;"
           @click="thumbUpClick"
      >
        <el-icon><svg fill="currentColor" class="icon20" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6186" width="200" height="200"><path d="M873.6 416h-188.8c12.8-44.8 28.8-115.2 19.2-188.8-6.4-60.8-41.6-105.6-92.8-124.8-38.4-12.8-76.8-6.4-99.2 16-25.6 25.6-38.4 76.8-51.2 128-9.6 35.2-16 70.4-28.8 89.6-32 54.4-102.4 76.8-115.2 80H224c-19.2 0-32 12.8-32 32v448c0 19.2 12.8 32 32 32h547.2C896 928 960 537.6 960 515.2c0-57.6-44.8-99.2-86.4-99.2zM96 416c-19.2 0-32 12.8-32 32v448c0 19.2 12.8 32 32 32s32-12.8 32-32V448c0-19.2-12.8-32-32-32z" p-id="6187"></path></svg></el-icon>
        <span v-if="answer.thumb_up !== '0'">
          {{" "+answer.thumb_up+" " }}赞同
        </span>
        <span v-else>
          赞同
        </span>
      </div>
      <div class="option" :class="{anti_active: isHate}"
           @click="thumbDownClick"
           onselectstart="return false;"
      >
        <el-icon><svg fill="currentColor" class="icon20" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6357" width="200" height="200"><path d="M725.333333 106.666667H256c-12.8 0-21.333333 8.533333-21.333333 21.333333v448c0 12.8 8.533333 21.333333 21.333333 21.333333h70.4c10.666667 4.266667 89.6 27.733333 123.733333 87.466667 10.666667 19.2 21.333333 55.466667 29.866667 91.733333 12.8 51.2 23.466667 98.133333 46.933333 123.733334 12.8 12.8 32 19.2 53.333334 19.2 12.8 0 23.466667-2.133333 36.266666-6.4 46.933333-17.066667 78.933333-59.733333 87.466667-115.2 10.666667-81.066667-10.666667-157.866667-23.466667-200.533334h183.466667c36.266667 0 78.933333-38.4 78.933333-85.333333-4.266667-6.4-12.8-405.333333-217.6-405.333333zM170.666667 106.666667H106.666667c-12.8 0-21.333333 8.533333-21.333334 21.333333v448c0 12.8 8.533333 21.333333 21.333334 21.333333h64c12.8 0 21.333333-8.533333 21.333333-21.333333V128c0-12.8-10.666667-21.333333-21.333333-21.333333z" p-id="6358"></path></svg></el-icon>
        反对
      </div>
      <div class="option" :class="{comment_active: showComments}"
           @click="handleCommentClick()"
           onselectstart="return false;"
      >
        <el-icon><svg fill="currentColor" class="icon20" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6899" width="200" height="200"><path d="M832 128 192 128C139.072 128 96 171.072 96 224l0 512c0 52.928 43.072 96 96 96l210.752 0 86.624 86.624C495.616 924.864 503.808 928 512 928s16.384-3.136 22.624-9.376L621.248 832 832 832c52.928 0 96-43.072 96-96L928 224C928 171.072 884.928 128 832 128zM336 512C309.536 512 288 490.464 288 464S309.536 416 336 416s48 21.536 48 48S362.464 512 336 512zM528 512c-26.464 0-48-21.536-48-48s21.536-48 48-48 48 21.536 48 48S554.464 512 528 512zM720 512c-26.464 0-48-21.536-48-48s21.536-48 48-48 48 21.536 48 48S746.464 512 720 512z" p-id="6900"></path></svg></el-icon>
        <span v-if="answer.comment_num !== '0'">
          {{" "+answer.comment_num+" "}}条评论
        </span>
        <span v-else> 评论</span>
      </div>
      <div class="option" :class="{collect_active: answer.is_collect==='1'}"
           @click="collectStarClick"
           onselectstart="return false;"
      >
        <el-icon><svg fill="currentColor" class="icon20" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6492" width="200" height="200"><path d="M915.2 413.866667c-4.266667-14.933333-19.2-25.6-34.133333-29.866667l-228.266667-34.133333-100.266667-215.466667c-6.4-14.933333-21.333333-25.6-38.4-25.6s-32 8.533333-38.4 23.466667l-106.666666 215.466666L142.933333 384c-14.933333 2.133333-27.733333 12.8-34.133333 27.733333-4.266667 14.933333-2.133333 32 10.666667 42.666667l166.4 172.8-38.4 238.933333c-2.133333 17.066667 4.266667 32 17.066666 42.666667 12.8 8.533333 32 10.666667 44.8 2.133333l202.666667-110.933333 202.666667 113.066667c6.4 4.266667 12.8 6.4 21.333333 6.4s17.066667-2.133333 23.466667-8.533334c12.8-8.533333 19.2-25.6 17.066666-40.533333l-38.4-241.066667 166.4-170.666666c10.666667-12.8 14.933333-29.866667 10.666667-44.8z" p-id="6493"></path></svg></el-icon>
        <span v-if="answer.collect_num !== '0'">
          {{" "+answer.collect_num+" "}}收藏
        </span>
        <span v-else> 收藏</span>
      </div>
      <div v-if="hasEdit && answer.byLoginUser === '1'" class="option"
           @click="editClick"
           onselectstart="return false;"
      >
        <el-icon><svg fill="currentColor" class="icon20" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2828" width="200" height="200"><path d="M323.608576 658.725888 366.068736 701.303808 468.333568 664.004608 360.828928 556.619776ZM513.3056 63.31904c-248.041472 0-449.069056 201.05216-449.069056 449.072128 0 247.994368 201.028608 449.069056 449.069056 449.069056 247.994368 0 449.07008-201.074688 449.07008-449.069056C962.37568 264.3712 761.299968 63.31904 513.3056 63.31904zM490.842112 686.511104l-0.239616-0.279552c-1.241088 1.040384-2.60096 1.999872-4.200448 2.56l-206.849024 75.480064c-5.398528 1.918976-11.474944 0.638976-15.471616-3.519488-4.07552-3.997696-5.397504-10.075136-3.398656-15.429632l75.399168-206.773248c0.562176-1.557504 1.440768-2.878464 2.51904-4.158464l-0.161792-0.198656L524.184576 348.490752c20.150272 20.108288 36.739072 36.658176 36.739072 36.658176l-145.522688 145.28512c-2.358272 2.279424-3.398656 5.276672-3.398656 8.31488 0 2.998272 1.040384 5.998592 3.398656 8.316928 2.280448 2.23744 5.27872 3.477504 8.395776 3.477504 3.117056 0 6.07744-1.240064 8.353792-3.477504L577.596416 401.861632l45.693952 45.617152L478.487552 592.12288c-4.557824 4.595712-4.557824 12.071936 0 16.668672 2.238464 2.200576 5.27872 3.438592 8.3968 3.438592 3.15904 0 6.115328-1.238016 8.354816-3.398656 0-0.039936 144.763904-144.643072 144.763904-144.643072s21.269504 21.269504 36.54144 36.620288L490.842112 686.511104zM751.264768 426.20928l-57.969664 57.929728c-29.78304-29.744128-98.985984-98.99008-152.357888-152.260608l58.047488-58.008576c20.789248-20.769792 54.771712-20.809728 75.522048 0l76.75904 76.8C772.054016 371.438592 772.015104 405.34016 751.264768 426.20928z" p-id="2829"></path></svg></el-icon>
        编辑
      </div>
    </div>

    <el-collapse-transition>
      <div v-if="showComments">
        <div style="height: 10px;"></div>
        <div class="comment_container">
          <div class="comment_list_title">所有评论</div>
          <div class="comment_list" v-if="comments.length !== 0">
            <div class="one_comment" v-for="comment in comments" :key="comment['comment_id']">
              <Comment :comment="comment" @delete-comment="updateCommentList(); updateCommentNum();"></Comment>
            </div>
          </div>
          <div v-else class="no_comment">
            暂无评论
          </div>
          <div class="comment_edit">
            <el-input
                v-model="commentToPost"
                autosize
                :rows="1"
                type="textarea"
                placeholder="写下你的评论吧..."
            />
            <el-button @click="postCommentClick" size="small" type="primary" style="margin-left: 10px">发表</el-button>
          </div>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import * as answerRequest from "@/network/answer";
import {
  collectAns,
  disCollectAns,
  thumbUpAns,
  unThumbUpAns
} from "@/network/user";
import {currentLoginData, putLoginPrompt} from "@/assets/js/common";
import Comment from "@/components/Comment";
import { ElMessage } from 'element-plus'
import {postComment} from "@/network/comment";
import {getAnswer} from "@/network/answer";

export default {
  name: "AnswerOptionLine",
  components: {Comment},
  props: {
    answer: {
      type: Object,
      default: {
        answer_id: 0,
        thumb_up: 99,     // 点赞数
        comment_num: 99,  // 评论数
        collect_num: 99,  // 收藏数
        is_thumb_up: "0", // 是否已点赞
        is_collect: "0", // 是否已收藏
        byLoginUser: "0",// 是否由当前登录用户发布
      }
    },
    hasEdit: {
      type: Boolean,
      default: false
    }
  },
  emits: ['answerEdit'],
  setup(props, context) {
    let userLoginInfo = {};
    currentLoginData(loginInfo=> {
      userLoginInfo = loginInfo;
    })

    const isHate = ref(false);

    const showComments = ref(false);
    const comments = ref(null);

    const updateCommentList = ()=> {
      answerRequest.getAnswerComments(props.answer.answer_id).then(res=> {
        comments.value = res.data;
      })
    }

    const handleCommentClick = () =>{
      // 如果是评论区还没有展开，则在点击时先获取评论区信息再展开
      if (showComments.value === false) {
        if (comments.value === null) {
          answerRequest.getAnswerComments(props.answer.answer_id).then(res=> {
            comments.value = res.data;
            showComments.value = true;
          })
        }
        else {
          showComments.value = true;
        }
      }
      else {
        showComments.value = false;
      }
    }

    const router = useRouter()

    const thumbUpClick = ()=> {
      // 如果已登录
      if (userLoginInfo['isLogin']) {
        let user_id = userLoginInfo['user_id'];
        // 如果没点赞则进行点赞
        if (props.answer.is_thumb_up === '0') {
          if (isHate.value) {
            isHate.value = false;
          }
          thumbUpAns(user_id, props.answer.answer_id).then(res=> {
            props.answer.thumb_up = res.data.thumb_up;
            props.answer.is_thumb_up = res.data.is_thumb_up;
          })
        }
        // 如果已点赞则取消点赞
        else {
          unThumbUpAns(user_id, props.answer.answer_id).then(res=> {
            props.answer.thumb_up = res.data.thumb_up;
            props.answer.is_thumb_up = res.data.is_thumb_up;
          })
        }
      }
      else {
        putLoginPrompt(router,"点赞");
      }
    }

    const thumbDownClick = ()=> {
      // 如果已登录
      if (userLoginInfo['isLogin']) {
        let user_id = userLoginInfo['user_id'];
        if (!isHate.value) {
          // 如果已点赞则取消点赞
          if (props.answer.is_thumb_up === '1') {
            unThumbUpAns(user_id, props.answer.answer_id).then(res=> {
              props.answer.thumb_up = res.data.thumb_up;
              props.answer.is_thumb_up = res.data.is_thumb_up;
            })
          }
          isHate.value = true;
        }
        else {
          isHate.value = false;
        }
      }
      else {
        putLoginPrompt(router,"反对");
      }
    }

    const collectStarClick = ()=> {
      // 如果已登录
      if (userLoginInfo['isLogin']) {
        let user_id = userLoginInfo['user_id'];
        // 如果没有收藏则进行收藏
        if (props.answer.is_collect === '0') {
          collectAns(user_id, props.answer.answer_id).then(res=> {
            props.answer.collect_num = res.data.collect_num;
            props.answer.is_collect = '1';
            ElMessage.success({
              message: "收藏文章成功！",
              duration: 1000
            });
          })
        }
        // 如果已收藏则取消收藏
        else {
          disCollectAns(user_id, props.answer.answer_id).then(res=> {
            props.answer.collect_num = res.data.collect_num;
            props.answer.is_collect = '0';
            ElMessage.success({
              message: "取消收藏文章成功！",
              duration: 1000
            });
          })
        }
      }
      else {
        putLoginPrompt(router,"收藏");
      }
    }

    const updateCommentNum = ()=> {
      getAnswer(props.answer.answer_id).then(res=> {
        props.answer.comment_num = res.data.comment_num;
      })
    }

    const commentToPost = ref("");
    const postCommentClick = ()=> {
      // 判断是否登录
      if(userLoginInfo['isLogin']) {
        let comment = commentToPost.value.trim();
        if (comment === "") {
          ElMessage.warning({
            message: "评论不能为空~",
            duration: 1000
          });
          return;
        }
        postComment({
          user_id: userLoginInfo['user_id'],
          answer_id: props.answer.answer_id,
          comment_content: commentToPost.value
        }).then(res=> {
          ElMessage.success({
            message: "评论已发布！",
            duration: 1000
          });
          commentToPost.value = "";
          // 更新当前文章下的评论
          answerRequest.getAnswerComments(props.answer.answer_id).then(res=> {
            comments.value = res.data;
            // 更新显示的评论数
            updateCommentNum();
          })
        })
      }
      else {
        putLoginPrompt(router,"发表评论");
      }
    }
    const editClick = () => {
      // 发出回答修改信号给父元素进行处理
      context.emit("answerEdit");
    }

    return {
      isHate,
      userLoginInfo,
      handleCommentClick,
      thumbUpClick,
      thumbDownClick,
      collectStarClick,
      editClick,
      showComments,
      comments,
      commentToPost,
      postCommentClick,
      updateCommentList,
      updateCommentNum
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/scss/common.scss";

.answer-wrapper {
  padding-bottom: 15px;

  .bottom-line {
    padding: 5px 15px 0 15px;
    display: flex;
    .icon20 {
      position: relative;
      top: 4px;
      right: 2px;
    }
    .option {
      color: #707070;
      padding: 5px 8px;
      &:hover {
        color: #8a9cb6;
        cursor: pointer;
      }
      &.active {
        color: #409eff;
      }
      &.collect_active {
        color: #fdc700;
      }
      &.comment_active {
        color: #19a15f;
      }
      &.anti_active {
        color: #dc4c40;
      }
    }
  }
  .comment_container {
    border: 2px solid #f1f3f4;
    margin: 0 15px;
    .comment_list_title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      background-color: #159f5c;
      color: white;
      line-height: 2.0;
    }
    .comment_list {
      .one_comment {
        border-bottom: 1px solid #f1f3f4;
      }
    }
    .no_comment {
      font-size: 32px;
      text-align: center;
      line-height: 2.0;
      background-color: #f1f3f4;
      color: #707070;
    }
    .comment_edit {
      padding: 10px;
      display: flex;
      flex-direction: row;
    }
  }
}
</style>
